<template>
	<view>
		<view class="selectGoodsList" v-for="(item,index) in OrderGoodsList" :key="index" v-if="item.Qty>0">
			<view class="goodListItem" :class="selectLookMore == index?'lookMore':''">
				<view class="goodsTitle"><text>{{item.GoodsName}}</text><button @tap="lookGoodsInfo(index)">{{selectLookMore==index?'收起':'展开'}}</button>
					<button @tap="deleteSelectGood(index)">删除</button>
				</view>
				<view >
					<view class="important_info">
						<view class="info-left">
							<image :src="item.Goods_Image_Path1" mode="aspectFit"  @tap="lookMorePic(item.Goods_Image_Path1)"></image>
						</view>
						<view class="info-right" @tap="changeInfo(index)">
							<!-- <view class="goods-itemWrap" style="display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: bold;">
								名称:
							</view> -->
							<view class="goods-itemWrap">
								<text class="good-item">
									编号:{{item.GoodsCode}}
								</text>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">单价:<text class="red">￥{{item.Price | onlyTwoFloat}}</text></view>
								<view class="good-item">数量:{{item.Qty | onlyTwoFloat}}</view>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">单位:{{item.UnitName}}</view>
								<view class="good-item">金额:<text class="red">￥{{item.Amount | onlyTwoFloat}}</text></view>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">库存:{{item.stockqty}}</view>
								<view class="good-item">折后价:<text class="red">￥{{item.DiscountPrice | onlyTwoFloat}}</text></view>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">批号:{{item.BatchNo}}</view>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">规格:{{item.Spec}}</view>
							</view>
							<view class="goods-itemWrap">
								<view class="good-item">税率:{{item.Tax | onlyTwoFloat}}</view>
								<view class="good-item">折扣:{{item.Discount | onlyTwoFloat}}</view>
							</view>
							<view class="goods-itemWrap" style="display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								备注:{{item.Remark}}
							</view>
						</view>
					</view>
					<!-- <view class="goods-itemWrap">
						<text class="good-item">库存:{{item.stockqty}}</text>
						<text class="good-item">金额:{{item.Amount | onlyTwoFloat}}</text>
					</view>
					<view class="goods-itemWrap">
						<text class="good-item">批号:{{item.BatchNo}}</text>
					</view>
					<view class="goods-itemWrap">
						<text class="good-item">税率:{{item.Tax | onlyTwoFloat}}</text>
						<text class="good-item">折扣价:{{item.Discount | onlyTwoFloat}}</text>
					</view>
					<view class="goods-itemWrap">
						备注:{{item.Remark}}
					</view> -->
				</view>
			</view>
		</view>
		<view class="bigPic" v-if="isShowBig" @tap="hidePic()">
			<image :src="Goods_Image_Path1" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                selectLookMore:-1,
				isShowBig:false,
				Goods_Image_Path1:""
			}
		},
		filters: {
			onlyTwoFloat(value) {
				return Math.round(parseFloat(value * 1000)) / 1000
			}
		},
		props: ['OrderGoodsList'],
		methods: {
			lookMorePic(Goods_Image_Path1){
				uni.showLoading({
					title:"加载中..",
					mask:false
					
				})
				var that = this;
				setTimeout(function(){
					that.isShowBig = true;
					that.Goods_Image_Path1 = Goods_Image_Path1;
					uni.hideLoading();
				},500);
			},
			hidePic(){
				this.isShowBig = false;
			},
			deleteSelectGood(index) {
				this.$emit('deleteSelectGood', {
					currentTarget:{
						detail:{
							deleteIndex: index
						}
					}
				})
			},
			changeInfo(index) {
				this.$emit('changeInfo', {
					currentTarget:{
						detail:{
							changeIndex: index
						}
					}
					
				})
			},
			lookGoodsInfo(index){
				if(this.selectLookMore == index){
					this.selectLookMore = -1;
				}else{
					this.selectLookMore = index;
				}
			}
		}

	}
</script>

<style>
	/**选取的商品列表**/
	.selectGoodsList {
		width: 100%;
		/* display: table; */
		padding-top: 8px;

	}

	.selectGoodsList .goodListItem {
		width: 95%;
		border-radius: 10upx;
		margin: auto;
		overflow: hidden;
		background: #FFF;
		height: 124px;
	}

	.selectGoodsList .goodListItem .important_info {
		width: 100%;
		display: flex;
		height: 224px;
	}
	.selectGoodsList .goodListItem .important_info .info-left {
		width: 84px;
		height: 84px;
		padding: 5px;
		box-sizing: border-box;
	}
	.selectGoodsList .goodListItem .important_info .info-left image {
		width: 100%;
		height: 100%;
	}
	.selectGoodsList .goodListItem .important_info .info-right {
		flex: 1;
		overflow: hidden;
	}
	.selectGoodsList .goodListItem.lookMore {
		/* display: table; */
		height: 264px;
	}

	.selectGoodsList .goodListItem .goodsTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: rgba(124, 170, 216, 1);
		box-sizing: border-box;
		font-size: 16px;
		padding: 0upx 15upx;
		color: #FFF;
		position: relative;
		display: flex;
	}

	.selectGoodsList .goodListItem .goodsTitle text {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.selectGoodsList .goodListItem .goodsTitle button {
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		text-align: center;
		border-radius: 30upx;
		border: none;
		background: #FFF;
		color: #5d5d5d;
		margin-top: 7.5px;
		margin-right: 3px;
	}

	.selectGoodsList .goodListItem .goods-itemWrap {
		width: 100%;
		box-sizing: border-box;
		padding: 0upx 15upx;
		height: 28px;
		line-height: 28px;
		display: flex;
	}

	/* .selectGoodsList .goodListItem .goods-itemWrap:last-child {
		display: block;
		height: 54px;
		line-height: 28px;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
	} */

	.selectGoodsList .goodListItem .goods-itemWrap view {
		flex: 1;
	}
	.red{
		color: red;
	}
	
	.bigPic{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		background: rgba(0,0,0,.7);
		z-index: 99999;
	}
	.bigPic image{
		width: 80%;
		height: 80%;
		position: fixed;
		left: 10%;
		top:10%;
	}
</style>
